<template>
    <div class="wrapper">
        <!-- header部分 -->
        <header>
            <p>菜单管理</p>
        </header>

        <!-- 可选菜单状态 -->
        <ul class="domenu">
            <li @click="toAdd">增加菜品</li>
            <li @click="toDelete">删除菜品</li>
            <li @click="toChange">更改菜品价格</li>
        </ul>

        <ul class="now-menu">
            <li>目前菜单如下：</li>
        </ul>
        
        <!-- 食品列表部分 -->
        <ul class="food">
            <li v-for="(item, index) in foodArr" :key="item.foodId">
                <div class="food-left">
                    <img :src="item.foodImg" />
                    <div class="food-left-info">
                        <h3>{{ item.foodName }}: {{ item.foodId }} (食品编号)</h3>
                        <p>{{ item.foodExplain }}</p>
                        <p>&#165;{{ item.foodPrice }}</p>
                    </div>
                </div>
                <div class="food-right">
                    <div>
                        <i class="fa fa-minus-circle" @click="minus(index)" v-if="item.quantity > 0"></i>
                    </div>
                    <p><span v-if="item.quantity > 0">{{ item.quantity }}</span></p>
                </div>
            </li>
        </ul>

		<ul class="block">
			<p>
				&nbsp;
			</p>  
	  	</ul>

        <!-- 底部菜单部分 -->
        <BusinessFooter />
    </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import BusinessFooter from '../components/BusinessFooter.vue';

export default {
    name: 'MenuManage',
    components: {
        BusinessFooter,
    },
    setup() {
		const router = useRouter();
        const business = reactive({
            businessId: '',
            businessName: '',
            businessAddress: '',
            businessExplain: '',
            orderTypeId: '',
            starPrice: '',
            deliveryPrice: '',
            remarks: '',
            password: '',
        });

        const foodArr = ref([]);

        const loadFoodData = () => {
            business.businessId = JSON.parse(sessionStorage.getItem('business')).businessId;
            axios.get(`/Food/businessId/${business.businessId}`)
                .then(response => {
                    foodArr.value = response.data.map(item => ({
                        ...item,
                        quantity: 0 // 初始化数量
                    }));
                })
                .catch(error => {
                    console.error(error);
                });
        };

        onMounted(() => {
            loadFoodData();
        });

        const toAdd = () => {
            // 路由跳转到增加菜品页面
            router.push({ path: '/addmenu' });
        };

        const toDelete = () => {
            // TODO: 实现删除菜品的逻辑
        };

        const toChange = () => {
            // 路由跳转到更改菜品价格页面
            router.push({ path: '/changemenu' });
        };

        const minus = (index) => {
            if (foodArr.value[index].quantity > 0) {
                foodArr.value[index].quantity--;
            }
        };

        return {
            business,
            foodArr,
            toAdd,
            toDelete,
            toChange,
            minus,
        };
    },
};
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
    width: 100%;
    height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
    width: 100%;
    height: 12vw;
    background-color: #0097FF;
    color: #fff;
    font-size: 4.8vw;
}

/****************** 可选菜单部分 ******************/
.wrapper .domenu {
    width: 100%;
    height: 5vw;
    margin-bottom: 5vw;
    background-color: #f5f5f5; /* 可选背景色，便于区分 */
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    top: 1vw; /* 将其放置在 header 正下方 */
    z-index: 999; /* 确保不在 header 上面 */
}

.wrapper .domenu li {
    font-size: 4.5vw;
    color: #555;
}

/****************** 当前菜单部分 ******************/
.wrapper .now-menu li {
    font-size: 4.5vw;
    color: #0b0ecf;
}

/****************** 食品列表部分 ******************/
.wrapper .food {
    width: 100%;
    margin-bottom: 40vw; /* 使用下外边距避开footer部分 */
}

.wrapper .food li {
    width: 100%;
    box-sizing: border-box;
    padding: 2.5vw;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wrapper .food li .food-left {
    display: flex;
    align-items: center;
}

.wrapper .food li .food-left img {
    width: 20vw;
    height: 20vw;
}

.wrapper .food li .food-left .food-left-info {
    margin-left: 3vw;
}

.wrapper .food li .food-left .food-left-info h3 {
    font-size: 3.8vw;
    color: #555;
}

.wrapper .food li .food-left .food-left-info p {
    font-size: 3vw;
    color: #888;
    margin-top: 2vw;
}

.wrapper .food li .food-right {
    width: 16vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wrapper .food li .food-right .fa-minus-circle {
    font-size: 5.5vw;
    color: #999;
    cursor: pointer;
}

.wrapper .food li .food-right p {
    font-size: 3.6vw;
    color: #333;
}

.wrapper .block{
  padding-bottom: 10vw;
}
</style>
